<template>
  <div class="page15" v-loading="loading">
    <div class="page-title">移动净增考核情况</div>
    <div class="page-content">
      <div class="text-content">
        <!-- <div>季度 **</div>
        <div>同比 ** 环比 **</div>
        <div>年 **</div>
        <div>同比 ** 环比 **</div> -->
        <div>{{ quarter }}</div>
        <div>{{ year }}</div>
      </div>
      <div class="tableBox">
        <el-table 
          :data="tableData" 
          style="width: 100%" 
          class="tableTh28"
          border 
        >
          <el-table-column label="单位:万户" prop="displayName" align="center"></el-table-column>
          <el-table-column label="月" prop="thisMonthValue" align="center"></el-table-column>
          <el-table-column label="季度" prop="thisQuarterValue" align="center"></el-table-column>
          <el-table-column label="时序完成" prop="completeQuarterBudget" align="center"></el-table-column>
          <el-table-column label="年" prop="thisYearLjValue" align="center"></el-table-column>
          <el-table-column label="时序完成" prop="completeYearBudget" align="center"></el-table-column>
          <el-table-column label="用户到达" prop="ddThisMonthValue" align="center"></el-table-column>
          <el-table-column label="活跃到达" prop="hyThisMonthValue" align="center"></el-table-column>
          <el-table-column label="活跃率" prop="hylThisMonthValue" align="center"></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import { $budgetAPI } from "@/api";
export default {
  props: {
    form: {
      type: Object,
      default: () => ({})
    }
  },
  data(){
    return {
      loading: false,
      tableData: [],
      quarter: "",
      year: "",
    }
  },
  created(){
    
  },
  methods: {
    getData(){
      this.loading = true;
      $budgetAPI.getCountyOperationPage15(
        { token: this.form.token, areaId: this.form.areaId, acctMonth: this.form.month },
        res => {
          if(res.code == 0){
            const { tableData, quarter, year } = res.content;
            this.tableData = tableData;
            this.quarter = quarter;
            this.year = year;
          }
          this.loading = false;
        },
        err => {
          this.loading = false;
        }
      )
    }
  },
}
</script>
<style lang="scss" scoped>
.page15 {
  padding: 20px 10px;
  border: 1px solid #dee5f3;
  border-radius: 5px;
  margin-top: 20px;
  .page-title {
    text-align: center;
    font-size: 24px;
    font-weight: 900;
  }
  .page-content {
    margin-top: 20px;
    overflow: hidden;
    .text-content {
      width: 200px;
      font-size: 18px;
      line-height: 30px;
      margin-top: 50px;
      float: left;
      > div {
        margin-bottom: 10px;
      }
    }
    .tableBox {
      float: right;
      width: calc(100% - 200px);
    }
  }
}
</style>